<!-- 
    Axios的封装:
      1.在src目录中创建 一个目录(request)
        在这个目录中创建一个文件 request.js   这个文件做请求封装
        再次创建一个文件 api.js              这个文件做请求的函数声明
 -->

 <!-- 
    清除默认样式:
      在vue项目中可以直接安装 reset-css 插件
  -->
<template>
  <div>
    <!-- 
      shape	搜索框形状，可选值为 round	string	square
     -->
     <!-- 搜索 -->
    <van-search disabled shape="round" @click="showPopup()" v-model="value" placeholder="请输入搜索关键词" />
    <!-- 轮播 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#7bb707">
      <van-swipe-item v-for="item in banner" :key="item.id">
        <img width="100%" :src="item.image_url" alt="加载使用">
      </van-swipe-item>
    </van-swipe>
    <!-- 
        点击搜索后加载的组件占位位置
     -->
     <!-- <transition name="popup"> -->
    <transition name="van-slide-right">
       <router-view></router-view>
    </transition>
    
  </div>
</template>

<script>
// 导入api.js
import {GetHomeList} from "@/request/api.js"
// import Vue from 'vue';
// 引入 组件 button
// import Button from 'vant/lib/button';
// import Stepper from 'vant/lib/stepper';
// 引入 组件button 对应的样式
// import 'vant/lib/button/style';
// import 'vant/lib/stepper/style';
// import { Button ,Stepper} from 'vant';
// 注册button组件
// Vue.use(Button);
// Vue.use(Stepper);
export default {
  data () {
    return {
      value: "",
      // value1:""
      banner:[]
    }
  },
  methods:{
    // 搜索弹出层方法
    showPopup(){
      this.$router.push("/home/popup")
    }
  },
  created(){
    GetHomeList()
    .then(res=>{
      // console.log(res);
      this.banner = res.data.banner;
    })
  }
}
</script>
 
<style lang = "less">
  // .popup-enter{
  //   right:-100%;
  // }
  // .popup-enter-active{
  //   transition:all .5s
  // }
  // .popup-enter-to{
  //   right:0%;
  // }
</style>